import React from 'react';
import { atom, selector, useRecoilState, useRecoilValue } from 'recoil';
import TodoList from './components/TodoList';

/** 原子状态 */
const textState = atom({
  key: 'textState',
  default: '',
});

function CharacterCounter() {
  return (
    <div>
      <TextInput />
      <CharacterCount />
    </div>
  );
}

function TextInput() {
  const [ text, setText ] = useRecoilState(textState);

  const onChange = (e: any) => {
    setText(e.target.value);
  }

  return <div>
    <input type="text" value={text} onChange={onChange} />
    <br />
    Echo: {text}
  </div>
}

/** 派生状态 */
const charCountState = selector({
  key: 'charCountState',
  get: ({ get }) => {
    const text = get(textState);

    return text.length;
  }
});

function CharacterCount() {
  const count = useRecoilValue(charCountState);

  return <>Character Count: {count}</>
}

const App = () => {
  return <div>
    <CharacterCounter/>
    <hr />
    <TodoList />
    </div>
};

export default App;
